<template>
	<a-layout-sider
			style="flex: 0 0 415px;min-width: 415px;max-width: 415px;width: 415px;background: #ffffff !important;">
		<div class="left-top">
			<div class="logoa1">
				<img src="../../../assets/images/generalDetection/detection.png"/>
			</div>
			<span>通用监测</span>
			<div class="logoa2">
				<div class="logoa2Img" @click="changePageAdd"></div>
				<span style="color: white;font-size: 14px;cursor: pointer;" @click="changePageAdd">添加规则</span>
			</div>
		</div>
		<div class="left-item" v-for="(item,i) in left_list">
			<div style="width: 50%;">
				<span :style="active==i+1?'color: rgb(23,119,255)':''" @click="changePage(i+1)">{{ item }}</span>
			</div>
			<div style="display: flex;width: 20%;height: 100%;justify-content: space-around;margin-left: 24%"
			     :style="active==i+1?'':'display: none'"
			>
				<div class="search" title="查看规则详情" @click="changePageRuleInfo"></div>
				<div class="delete" title="删除" @click="deleteButton"></div>
				<div :style="collspanQuery?'display:none':''" class="start" title="开始" @click="showflag"></div>
			</div>
		</div>
	</a-layout-sider>
</template>

<script>

import {ruleNameList} from "@/api/generalDetection/generalDetetion";

export default {
	name: "generalDetetionindex",
	props: ["active"],
	data() {
		return {
			left_list: [],
			collspanQuery: true,
		}
	},
	methods: {

		// 删除事件
		deleteButton() {
			this.$message.success("删除成功");
		},
		showflag() {
			this.collspanQuery = !this.collspanQuery;
			localStorage.setItem('collspanQuery', this.collspanQuery);
		},

		changePage(tag) {
			let path;
			if (tag == 1) {
				path = "generalDetection";
			} else if (tag == 2) {
				path = "generalDetection2";
			} else if (tag == 3) {
				path = "generalDetection3";
			} else if (tag == 4) {
				path = "generalDetection4";
			} else if (tag == 5) {
				path = "generalDetection5";
			} else if (tag == 6) {
				path = "generalDetection6";
			} else if (tag == 7) {
				path = "generalDetection7";
			} else if (tag == 8) {
				path = "generalDetectionAdd";
			}
			this.$router.push({
				path: '/' + path,
			})
		},
		changePageAdd() {
			this.$router.push({
				path: "/generalDetectionAdd",
			})
		},
		changePageRuleInfo() {
			this.$router.push({
				path: "/generalRulesInfo",
			})
		},
	},
	mounted() {
		if (localStorage.getItem('collspanQuery') == 'true') {
			this.collspanQuery = true
		} else if (localStorage.getItem('collspanQuery') == 'false') {
			this.collspanQuery = false
		}
	},
	created() {
		ruleNameList().then(res => {
			let samples = res.data.data
			console.log('=================', samples)
			for (let i = 0; i < samples.advice.length; i++) {
				this.left_list.push(samples.advice[i].miediatype)
			}
		})
	},
}
</script>

<style scoped lang="scss">
.left-top {
	height: 60px;
	font-size: 16px;
	display: flex;
	align-items: center;
	background-color: rgb(23, 119, 255);
	width: 100%;

	.logoa1 {
		margin: 0 25px 0 25px;
	}

	.logoa2Img {
		width: 20%;
		height: 20%;
		background: url("../../../assets/images/generalDetection/addChart.png") left center no-repeat;
		display: inline-block;
		margin-left: 25%;
		cursor: pointer;
	}

	.logoa2 {
		height: 100%;
		width: 25%;
		margin-left: 38%;

	}

	span {
		line-height: 60px;
		color: #ffffff;
	}
}

.left-item {
	height: 60px;
	font-size: 14px;
	display: flex;
	margin-left: 65px;
	align-items: center;

	span {
		cursor: pointer;
	}

	.suspended {
		background: url("../../../assets/images/generalDetection/suspended.png") left center no-repeat;
		width: 20%;
		height: 100%;
		cursor: pointer;
	}

	.delete {
		background: url("../../../assets/images/generalDetection/delete.png") left center no-repeat;
		width: 20%;
		height: 100%;
		cursor: pointer;
	}

	.search {
		background: url("../../../assets/images/generalDetection/1.png") left center no-repeat;
		width: 20%;
		height: 100%;
		cursor: pointer;
	}

	.start {
		background: url("../../../assets/images/generalDetection/26.png") left center no-repeat;
		width: 20%;
		height: 100%;
		cursor: pointer;
	}
}


</style>
